<template>
    <div class="">
        <ezm-layout>
            <van-nav-bar
                slot="nav"
                title="下拉刷新加上拉加载更多"
                left-arrow
                @click-left="g_navigate.back()"
            ></van-nav-bar>
            <!-- 无限滚动组件 -->
            <!-- 如需下拉或上拉功能，则必须传入分页对象 -->
            <ezm-scroll-box
                :pull-down="true"
                :pull-up="true"
                :paginate="paginate"
            >
                <van-cell
                    v-for="item in list" :key="item.id"
                    :title="item.title"
                    :label="item.label"
                    :value="item.id"
                ></van-cell>
            </ezm-scroll-box>
        </ezm-layout>
    </div>
</template>

<script>
    import EzmLayout from "@/components/layout/ezm-layout";
    import EzmScrollBox from "@/components/scroll/ezm-scroll-box";
    import Paginate from "@/utils/paginate.util";
    import {mockUtil} from "@/utils/common.util";
    import {request} from "@/utils/request.util";
    import {PageMixin} from "@/mixin/navigate.mixin";

    export default {
        name: 'BetterScrollAll',
        mixins: [PageMixin],
        components: {EzmScrollBox, EzmLayout},
        props: {},
        data() {
            return {
                // 生成分页对象
                // 分页接受两个参数 Function : 下拉或上拉的回调方法，（可选）Integer : 每页数量
                paginate: new Paginate(this.getList),
                list: [],
            }
        },
        computed: {},
        watch: {},
        created() {
        },
        mounted() {
        },
        destroyed() {
        },
        methods: {
            /**
             * 进入页面时将自动触发 init() 函数
             * 返回到此页则不会被执行
             */
            init() {
                // 自动触发下拉刷新操作
                this.paginate.autoPullDown();
            },
            /**
             * 将会被下拉和上拉回调的函数
             * paginate 在回调此函数的时候会自动传入 refresh 参数
             * 下拉刷新则 传入 true, 上拉加载更多则传入 false
             * @param refresh 是否为下拉刷新
             */
            getList(refresh = false) {
                // 预先使用 mockjs 模拟数据，如有真实接口则无需模拟
                this.mockData();
                // 请求 BetterScrollAll 的 get 接口，并传入分页参数
                // this.paginate.getRequestParams() 可以从分页对象中提取后端需要的分页参数
                request('BetterScrollAll')
                    .get(this.paginate.getRequestParams())
                    .then(resp => {
                        // 将数据并入 list 或覆盖 list
                        this.list = refresh ? resp.records : this.list.concat(resp.records);
                        // 完成数据加载
                        // 记得一定要传入 resp ，paginate 会根据 resp 结果判定是否还有下一页
                        // 分别显示不同的底部内容，如 ’没有更多了‘ 等；
                        this.paginate.finishLoading(resp);
                    })
                    // 如果请求失败，则必须调用完成数据加载
                    // 无需传递参数，仅结束加载动画
                    .catch(_ => this.paginate.finishLoading());
            },
            /**
             * 模拟 2 页 完整数据，
             * 第三页数据为 5 条
             */
            mockData() {
                mockUtil.mock(/BetterScrollAll/i, 'get', {
                    code: 200,
                    message: '',
                    data: {
                        current: this.paginate.toPage,
                        size: this.paginate.size,
                        [`records|${this.paginate.toPage > 2 ? 5 : this.paginate.size}`]: [{
                            'id|+1': (this.paginate.toPage - 1) * this.paginate.size + 1,
                            'title': '@cname',
                            'label': '@name',
                        }],
                    }
                })
            }
        }
    };
</script>

<style lang="less">

</style>